<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram Reproduction</title>
</head>
<body>
<canvas id="physicsDiagramCanvas" width="550" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
    const canvas = document.getElementById('physicsDiagramCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Geometry Settings ---
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    const pointRadius = 4;
    
    // Define coordinates based on a unit length 'l'
    const l_unit = 120;
    const startX = 50;
    const y_pos = 100;

    const pos_B = { x: startX, y: y_pos };
    const pos_A = { x: startX + l_unit, y: y_pos };
    const pos_ball = { x: startX + l_unit + 2 * l_unit, y: y_pos };

    // --- Drawing Functions ---
    function drawArrow(ctx, fromx, fromy, tox, toy) {
        const headlen = 10; // length of head in pixels
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // --- Main Drawing Logic ---

    // Draw dashed line from B to A
    ctx.beginPath();
    ctx.setLineDash([6, 4]);
    ctx.moveTo(pos_B.x, pos_B.y);
    ctx.lineTo(pos_A.x, pos_A.y);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // Draw solid line from A to ball
    ctx.beginPath();
    ctx.moveTo(pos_A.x, pos_A.y);
    ctx.lineTo(pos_ball.x, pos_ball.y);
    ctx.stroke();

    // Draw points (nails and ball)
    ctx.beginPath();
    ctx.arc(pos_B.x, pos_B.y, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(pos_A.x, pos_A.y, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(pos_ball.x, pos_ball.y, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    // Draw velocity vector
    const velocity_len = 70;
    drawArrow(ctx, pos_ball.x, pos_ball.y, pos_ball.x, pos_ball.y + velocity_len);

    // --- Draw Labels ---
    const textAboveY = y_pos - 15;
    const textBelowY = y_pos + 15;
    
    ctx.textAlign = 'center';

    // Chinese Labels
    ctx.font = '22px Simsun';
    ctx.textBaseline = 'bottom';
    ctx.fillText('钉', pos_B.x, textAboveY);
    ctx.fillText('钉', pos_A.x, textAboveY);
    ctx.fillText('小球', pos_ball.x, textAboveY);

    // Point Labels (A, B)
    ctx.font = '20px Times New Roman';
    ctx.textBaseline = 'top';
    ctx.fillText('B', pos_B.x, textBelowY);
    ctx.fillText('A', pos_A.x, textBelowY);

    // Distance Labels (l, 2l)
    ctx.font = 'italic 20px Times New Roman';
    ctx.textBaseline = 'bottom';
    ctx.fillText('l', (pos_B.x + pos_A.x) / 2, textAboveY);
    ctx.fillText('2l', (pos_A.x + pos_ball.x) / 2, textAboveY);

    // Velocity Label (v₀)
    ctx.textAlign = 'left';
    ctx.textBaseline = 'alphabetic';
    const vel_arrow_end_y = pos_ball.y + velocity_len;
    const vel_label_x = pos_ball.x + 10;
    const vel_label_y = vel_arrow_end_y - 10;
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('v', vel_label_x, vel_label_y);
    ctx.font = 'italic 16px Times New Roman';
    ctx.fillText('0', vel_label_x + 12, vel_label_y + 5);

    // Figure Caption
    ctx.font = '20px Simsun';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('力图 3.9.1', canvas.width / 2, canvas.height - 15);

</script>
</body>
</html>